<template>
  <div>
    <div class="loginpage">
      <div class="box">
        <div class="pic"></div>
        <div class="loginbox">
          <div class="bcg"></div>
          <div class="logintit">
            <h3>登录</h3>
            <p>欢迎登录网格化联动</p>
            <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm" @submit.native.prevent>
              <el-form-item prop="pass">
                <el-input
                  v-model.trim="ruleForm.account"
                  autocomplete="off"
                  maxlength="12"
                  placeholder="请输入登录账号"
                >
                  <template slot="prepend"
                    ><span class="el-icon-user-solid" style="color: #0180f6; font-size: 20px"></span></template
                ></el-input>
              </el-form-item>
              <el-form-item prop="checkPass">
                <el-input
                  type="password"
                  v-model.trim="ruleForm.password"
                  autocomplete="off"
                  maxlength="10"
                  placeholder="请输入登录密码"
                >
                  <template slot="prepend"
                    ><span class="el-icon-lock" style="color: #0180f6; font-size: 20px"></span></template
                ></el-input>
              </el-form-item>
              <el-form-item prop="checkPass">
                <div class="codeBox">
                  <el-input v-model.trim="code" autocomplete="off" maxlength="4" class="codeInput"> </el-input>
                  <div class="coderight" @click="refreshCode">
                    <SIdentify :identify-code="identifyCode"></SIdentify>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="btn">
                <el-button
                  type="primary"
                  style="width: 208px"
                  @click="gopush"
                  v-loading.fullscreen.lock="fullscreenLoading"
                  >登录</el-button
                >
                <!-- <el-button type="info" style="margin-left: 159px" @click="rest">重置</el-button> -->
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from '../components/identify'
import api from '@/api/api'
import router from '@/router/index'
import { resetRouter } from '@/router/resetRouter'
export default {
  name: 'LogIn',
  components: {
    SIdentify: SIdentify,
  },
  data() {
    return {
      title: '后台登录系统',
      ruleForm: {
        account: '',
        password: '',
      },
      id: 1,
      code: '',
      identifyCode: 'kgh2',
      identifyCodes: '1234567890abcdefghijklnmopqrstuvwxyz',
      keyClock: false,
      node: false,
      fullscreenLoading: false,
    }
  },
  created() {
    window.addEventListener('keydown', this.handkeyCode, true)
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  mounted() {
    resetRouter()
  },
  methods: {
    rest() {
      this.$refs['ruleForm'].resetFields()
      this.ruleForm = {
        user: '',
        password: '',
      }
    },
    handkeyCode(e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      if (key === 13) {
        if (!this.keyClock) {
          this.keyClock = true
          this.gopush()
        }
      }
      if (key === 119) {
        this.code = this.identifyCode
      }
    },
    gopush() {
      if (!this.code) {
        this.$message({
          message: '请输入验证码！',
          type: 'error',
        })
        this.keyClock = false
        return
      }
      if (this.code !== this.identifyCode) {
        this.$message({
          message: '验证码错误！',
          type: 'error',
        })
        this.keyClock = false
        return
      }
      this.fullscreenLoading = true
      api.getlogin(this.ruleForm).then(res => {
        if (res.code == '200') {
          this.keyClock = false
          localStorage.setItem('avatar', res.data.avatar)
          localStorage.setItem('fullName', res.data.fullName)
          localStorage.setItem('roleId', res.data.roleInfoDTOS[0].roleId)
          localStorage.setItem('router', JSON.stringify(res.data.permissionTree))
          localStorage.setItem('userId', res.data.userId)
          if (res.data.account === 'superadmin' || res.data.account === 'admin1') {
            localStorage.setItem('account', 'admin')
          } else {
            localStorage.setItem('account', res.data.account)
          }
          this.$message({
            message: '登录成功！',
            type: 'success',
          })
          this.$store.commit('addrouters')
          let newrouter = this.$store.state.menuList
          function getChildRouter(routers) {
            for (let i = 0; i < routers.length; i++) {
              if (routers[i].children) {
                getChildRouter(routers[i].children)
              } else {
                router.addRoute('home', routers[i])
              }
            }
          }
          getChildRouter(newrouter)
          this.fullscreenLoading = false
          this.$router.push('/indexPage')
        } else {
          this.fullscreenLoading = false
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.keyClock = false
        }
      })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
      this.code = process.env.NODE_ENV === 'development' ? this.identifyCode : ''
    },
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handkeyCode, true)
  },
}
</script>

<style lang="scss" scoped>
.loginpage {
  height: 100vh;
  width: 100wh;
  background-image: url('@/assets/bgc1.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    overflow: hidden;
    position: relative;
    .pic {
      width: 652px;
      height: 441px;
      background-size: 100% 100%;
    }

    .loginbox {
      width: 608px;
      height: 50vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .bcg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255);
        // filter: blur(3px);
      }
      .logintit {
        width: 456px;
        height: 339px;
        border-radius: 15px 15px 15px 15px;
        margin: auto;
        z-index: 111;
        h3 {
          margin: 0;
          text-align: center;
          color: #333333;
        }
        p {
          margin: 20px 10px;
          text-align: center;
          font-size: 18px;
          color: #797b79;
        }
        hr {
          width: 97%;
        }
        .el-form {
          width: 82%;
          margin: 0 auto;
          margin-top: 19px;

          ::v-deep .el-form-item__label {
            font-size: 14px;
            color: black;
          }
          .btn {
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
  }
}
.codeBox {
  display: flex;
  justify-content: space-between;
}
.codeInput {
  width: 180px;
  margin-right: 10px;
}
</style>
